import { useLocation } from 'react-router-dom';
import styles from './MainPageAccount.module.scss';
import { useDispatch, useSelector } from 'react-redux';
import CardAccount from '../../CardAccount/CardAccount';
import { useEffect } from 'react';
import { getAccountAll, getAccountById } from '../../../features/account/account';
import { getCookie } from '../../../utils';

const MainPageAccount = () => {
  const { account, isLoading, accounts } = useSelector(({ account }) => account);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getAccountAll());
  }, []);
  return (
    <div className={styles.MainPageAccount}>
      <h1 className={styles.title}>Аккаунты</h1>
      <div className={styles.wrapper}>
        {isLoading ? (
          accounts.data.items?.map((account) => (
            <CardAccount
              key={account.id}
              id={account.id}
              firstName={account.firstName}
              lastName={account.lastName}
              email={account.email}
            />
          ))
        ) : (
          <h1>Загурзка</h1>
        )}
      </div>
    </div>
  );
};

export default MainPageAccount;
